<template>
    <view>
        <view class="wrap">
            <view class="tabs-view">
                <u-tabs :list="tabsList" active-color="#ff5000" :is-scroll="false" :current="current" @change="change"></u-tabs>
            </view>
            <view class="swiper-box">
                <mescroll-body ref="mescrollRef" top="80" auto="false" :down="down"  @init="mescrollInit" @down="downCallback" @up="upCallback">
                    <view class="order-list-view" v-for="(order,index) in orderList" :key="index">
                        <view class="order-header" >
                            <view class="order-sn" @click="onSellerDetail(order.seller_id,order.seller_name)">
                                <view class="seller-name u-flex">
                                    <u-icon name="shop" custom-prefix="custom-icon" size="35"></u-icon>
                                    <view class="u-margin-left-10">{{order.seller_name}}</view>
                                    <u-icon name="arrow-right" color="#c8c9cc"></u-icon>
                                </view>
                            </view>

                            <uni-tooltip
                                :content="tooltipContent(order)">
                                <view class="tooltip-box">
                                    {{order.order_type === 'PINTUAN' ? order.ping_tuan_status : order.order_status_text}}
                                    <icon
                                        type="info"
                                        size="14"
                                        color="#666"
                                        style="margin-left: 6px;"
                                        v-if="tooltipContent(order)"
                                    />
                                </view>
                            </uni-tooltip>

                        </view>
                        <view class="goods-list-view" v-for="(sku,skuIndex) in order.sku_list" @click="onDetail(order.sn)">
                            <goods-info
                                :goodsName="sku.name"
                                :goodsNum="sku.num"
                                :goodsPrice="sku.original_price"
                                :goodsImg="sku.goods_image"
                                :goodsSpecList="sku.spec_list"
                                :goodsType="order.order_type"
                            >
                            </goods-info>
                        </view>
                        <view class="order-assemble" v-if="order.waiting_group_nums">
                            还差<text style="color: #ff5000;">{{ order.waiting_group_nums }}</text>人成团
                        </view>
                        <view class="order-price-view">
                            <text class="order-total-price">总价</text>
                            <custom-price :price="order.order_amount+order.discount_price" :size="25" :textColor="'#82848a'"></custom-price>
                            <text class="order-total-price">, 优惠</text>
                            <custom-price :price="order.discount_price" :size="25" :textColor="'#82848a'"></custom-price>
                        </view>
                        <view class="order-price-view">
                            <text class="order-pay-price">实付款</text>
                            <custom-price :price="order.order_amount" :size="33" :textColor="'#303133'" :fontWeight="600"></custom-price>
                        </view>
                        <view class="order-footer u-flex u-row-right">
                            <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_cancel" @click="onCancel(order.sn)">取消订单</u-button>
                            <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_pay" @click="onPay(order.sn)">去支付</u-button>
                            <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_service_cancel" @click="onServiceCancel(order.sn)">取消订单</u-button>
                            <u-button size="mini" shape="circle" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_rog" @click="onRog(order.sn)">确认收货</u-button>
                            <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle" v-if="order.order_operate_allowable_vo.allow_comment" @click="onComment(order.sn,order.sku_list)">评价</u-button>
                            <u-button size="mini" shape="circle" type="error" :plain="true" :custom-style="customStyle" v-if="order.comment_status === 'WAIT_CHASE'" @click="addEvaluation(order)">追加评论</u-button>
                        </view>
                    </view>

                </mescroll-body>
            </view>
        </view>
        <!-- 取消订单 popup -->
        <u-popup class="block-popup" v-model="cancelShow" mode="bottom" length="60%">
            <view class="header">
                取消订单
            </view>
            <view class="body">
                <view class="title">
                    请选择取消订单的原因（必选）：
                </view>
                <u-radio-group v-model="reason">
                    <view class="value">
                        <view class="radio-view" v-for="(item,index) in cancelList">
                            <u-radio active-color="red" label-size="30" shape="circle" :name="item.name" @change="reasonChange">{{item.name}}</u-radio>
                        </view>
                    </view>
                </u-radio-group>
            </view>
            <view class="footer">
                <u-button type="error" shape="circle" @click="submitCancel">提交</u-button>
            </view>
        </u-popup>
        <u-toast ref="uToast" />
        <u-modal v-model="rogShow" :content="content" :show-cancel-button="true" @confirm="confirmRog"></u-modal>
        <loading-view v-if="loading"></loading-view>
    </view>
</template>

<script>
    import * as API_Order from '@/api/order.js'
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import UniTooltip from "@/components/uni-tooltip/uni-tooltip"

    export default {
        mixins: [MescrollMixin], // 使用mixin
        components: { UniTooltip },
        data() {
            return {
                rogShow: false,
                content: '请确认是否收到货物，否则可能会导致钱财两空',
                triggered: false,
                customStyle: {
                    height: '60rpx',
                    fontSize: '28rpx',
                    margin: '0rpx 0rpx 0rpx 20rpx',
                    padding: '0rpx 30rpx',
                },
                tabsList: [{
                        name: '全部'
                    }, {
                        name: '待付款'
                    }, {
                        name: '待发货'
                    }, {
                        name: '待收货'
                    }, {
                        name: '待评价'
                }],
                current: 0,
                orderList: [],
                orderStatus: [{
                        order_status:'ALL',
                    }, {
                        order_status:'WAIT_PAY',
                    }, {
                        order_status:'WAIT_SHIP',
                    }, {
                        order_status:'WAIT_ROG',
                    },{
                        order_status:'WAIT_COMMENT',
                }],
                params: {
                    order_status: '',
                    page_no: 1,
                    page_size: 10,
                },
                //底部加载数据时的状态
                loadStatus: 'loading',
                //是否允许加载数据（true：允许）。如果没有更多的数据了，就不再调用API了。
                isLoad: true,
                //取消订单 popup
                cancelShow: false,
                reason: '',
                //当点击操作按钮时，设置选中的订单编号。
                orderSn: '',
                cancelList: [{
                        name: '商品无货',
                        disabled: false
                    },
                    {
                        name: '不想要了',
                        disabled: false
                    },
                    {
                        name: '商品信息填写错误',
                        disabled: false
                    },
                    {
                        name: '地址信息填写错误',
                        disabled: false
                    },
                    {
                        name: '商品降价',
                        disabled: false
                    },
                    {
                        name: '其它',
                        disabled: false
                }],
                down: {
                    auto: false
                },
                loading: true
            };
        },
        computed: {
            /** 状态提示文案 */
            tooltipContent() {
                return (order) => {
                    if (order && order.order_operate_allowable_vo.allow_check_cancel && order.order_status != 'CANCELLED') {
                        return '该订单已售后'
                    } else if (order && order.ship_status === 'SHIP_NO' && order.order_type === 'CHANGE') {
                        return '该订单已售后'
                    } else {
                        return ''
                    }
                }
            }
        },
        onLoad(options) {
            let value = options.value;
            if(this.$u.test.isEmpty(value)){
                value = 0;
            }
            this.current = value;
            this.params.order_status = this.orderStatus[value].order_status;

            uni.$on('back', () => {
            	this.change(this.current)
            });
        },
        methods: {
            change(index) {
                //跳转tab，初始化数据
                this.loadStatus = 'loading',
                this.isLoad = true,
                this.orderList = [];
                this.current = index;
                this.params = {
                    order_status : this.orderStatus[index].order_status,
                    page_no: 1,
                    page_size: 10
                }
                this.mescroll.resetUpScroll(true)
            },
            getOrderList(){
                // this.loadStatus = 'loading';
                API_Order.getOrderList(this.params).then(res => {
                    let orderList = res.data;
                    orderList.forEach(order => {
                        order.sku_list.forEach(sku => {
                            let specValues = "";
                            if (sku.spec_list !== null){
                                sku.spec_list.forEach(spec => {
                                    specValues += spec.spec_value+",";
                                })
                            }
                            sku.spec_value_str = specValues.slice(0,specValues.length-1);
                        })
                    })
                    this.loading = false;
                    this.orderList = this.orderList.concat(orderList);
                    this.mescroll.endBySize(res.data.length, res.data_total);
                })
            },
            //上拉加载数据
            upCallback (page){
                this.params.page_no = page.num;
                this.getOrderList();
            },
            //下拉刷新
            downCallback(){
                this.change(this.current);
            },
            //取消订单（未支付）
            onCancel(orderSn) {
                this.cancelShow = true;
                this.orderSn = orderSn;
            },
            //支付订单
            onPay(order_sn) {
                uni.navigateTo({
                    url: '/order-module/cashier/cashier?order_sn='+order_sn
                })
            },
            //取消订单（已支付，未发货）
            onServiceCancel(order_sn) {
                uni.navigateTo({
                    url: '/order-module/order/after-sale/service-cancel?order_sn='+order_sn
                })
            },
            //确认收货
            onRog(order_sn) {
                this.rogShow = true;
                this.orderSn = order_sn;
            },
            //评价
            onComment(order_sn,sku_list) {
                uni.navigateTo({
                    url: `/order-module/order/evaluation?order_sn=${order_sn}&sku_list=${encodeURIComponent(JSON.stringify(sku_list))}`
                })
            },
            addEvaluation(order){
                console.log('order', order);
                this.$u.route('/mine-module/add-evaluation', {
                	order_sn: order.sn
                });
            },
            //选择取消原因
            reasonChange(reason) {
                this.reason = reason;
            },
            //提交取消订单（未付款）
            submitCancel() {
                if (this.reason == "") {
                    this.cancelShow = false;
                    this.$refs.uToast.show({
                        title: '请选择取消订单原因',
                        type: 'error',
                        position: 'top'
                    })
                } else {
                    API_Order.cancelOrder(this.orderSn,this.reason).then(res => {
                        this.cancelShow = false;
                        this.$refs.uToast.show({
                            title: '已取消订单',
                            type: 'success',
                            position: 'top'
                        })
                        this.downCallback();
                    });
                }
            },
            //跳转到商品详情页
            onDetail(orderSn) {
                uni.navigateTo({
                    url: '/order-module/order/order-detail?orderSn='+orderSn,
                })
            },
            //跳转到店铺首页页
            onSellerDetail(sellerId,sellerName) {
                const _shopInfo = {
                    shop_id: sellerId,
                    shop_name: sellerName,
                    shop_logo: '',
                    tabNum: 0,
                };
                uni.navigateTo({
                    url: '/pages/shop/shop'+this.$u.queryParams(_shopInfo, true, 'indices'),
                })
            },
            confirmRog(){
                API_Order.confirmReceipt(this.orderSn).then(res => {
                    this.downCallback();
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    /deep/ .uni-tooltip-popup {
        width: 200rpx;
        left: -80rpx;
    }
    .tooltip-box {
        display: flex;
        align-items: center;
    }
    .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--window-top));
        width: 100%;
    }
    .swiper-box {
        flex: 1;
        height: 90%;
    }
    .order-assemble {
        text-align: right;
        margin-right: 20rpx;
        color: #82848a;
        font-size: 24rpx;
    }
    .order-list-view {
        margin: 20rpx;
        background-color: #FFFFFF;
        border-radius: 10rpx;
        .order-header {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            padding: 20rpx 20rpx;
            .order-sn {
                font-size: 29rpx;
                font-weight: bold;
            }
            .order-status {
                color: #ff5000;
                font-weight: 500;
                position: inherit;
                // .tips-content {
                //     font-size: 10px;
                //     padding: 6px;
                // }
            }
        }
        .goods-list-view {
            padding: 0rpx 20rpx;
        }
        .order-price-view {
            padding-right: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-end;
            .order-total-price {
                color: #82848a;
                margin-left: 10rpx;
            }
            .order-pay-price {
                font-size: 33;
                font-weight: 600;
                margin-left: 8rpx;
            }
        }
        .order-footer {
            padding: 20rpx;
        }
    }
    .block-popup {
        .header {
            padding: 20rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }
        .body {
            padding: 20rpx 30rpx;
            .title {
                font-weight: 600;
            }
            .value {
                display: flex;
                flex-direction: column;
                .radio-view {
                    margin: 10rpx 0rpx;
                }
            }
        }
        .footer {
            padding: 0rpx 20rpx;
        }

    }
</style>
